PepSim.define('PepSim.LogView', {
	
	title: 'Entity log',
	
	init : function (app) {
		var me = this, images;
		this.app = app;
		this.context = app.context;
		this.canvas = app.canvas;
		this.world = app.world;
		
		images = this.loadImages([
			'resources/images/close.png', 
			'resources/images/down.png',
			'resources/images/up.png'
		]);
				
		this.top = 50;
		this.left = 50;
		this.width = this.canvas.width - 120;
		this.height = this.canvas.height - 120;
		this.titleHeight = 50;
		
		this.fbar = [{
			left: this.width,
			top: 53,
			width: 40,
			height: 40,
			image: images[0],
			handler: this.close
		},{
			left: this.width - 50,
			top: 53,
			width: 40,
			height: 40,
			image: images[1],
			handler: this.scrollDown
		},{
			left: this.width - 100,
			top: 53,
			width: 40,
			height: 40,
			image: images[2],
			handler: this.scrollUp
		}];
		
		this.pageSize = (this.height - this.titleHeight) / 20;
		this.firstItem = 0;
				
	},
	
	close: function (button) {
		this.app.closeLog();
	},
	
	scrollUp: function (button) {
		this.firstItem = this.firstItem - this.pageSize;
	},
	
	scrollDown: function (button) {
		this.firstItem = this.firstItem + this.pageSize;
	},
	
	loadImages : function (names) {
		var i = 0,
			me = this,
			imageLoaded = 0,
			images = [],
			onLoad = function () {
				imageLoaded = imageLoaded + 1;
				if (imageLoaded >= names.length) {
					me.ImageLoaded = true;
				}
			};
		for (i = 0 ; i < names.length; i = i + 1) {
			images[i] = new Image();
			images[i].addEventListener('load', onLoad);
			images[i].src = names[i];
		}
		return images;
	},
	
	draw : function () {
		var logTop = 120, 
			index = 0, 
			i,
			foodEnergy = 0,
			numFood = 0;
	
		// Draw window background

		//this.context.fillStyle = "#000066";
		this.context.fillStyle = "#eeeeee";
		this.context.fillRect(this.top, this.left, this.width, this.height);
		// Draw window title
		this.context.fillStyle = "#0000aa";
		this.context.fillRect(this.top, this.left, this.width, this.titleHeight);

		this.context.lineWidth = "4";
		this.context.strokeStyle = "#0000aa";
		this.context.rect(this.top, this.left, this.width, this.height);
		this.context.stroke();
		
		// Draw title button
		for (i = 0; i < this.fbar.length; i = i + 1) {
			var button = this.fbar[i];
			if (this.ImageLoaded) {
				this.context.drawImage(button.image, button.left, button.top);
			}
		}
				
		//this.context.fillStyle = "#ffffff";
		this.context.fillStyle = "#0000aa";
		this.context.font = "16px Lucida console";
		this.world.entities.foreach(function (entity) {
			if (entity.type === 'pep') {
				if (index > this.firstItem && index < this.firstItem + this.pageSize) {
					this.context.fillText(index + ') ' + entity.toString(), 80, logTop);
					logTop = logTop + 20;
				}
				index = index + 1;
			}
			if (entity.type === 'food') {
				foodEnergy = foodEnergy + entity.energy;
				numFood = numFood + 1;
			}
		}, this);
		
		this.context.fillStyle = "#ffffff";
		this.context.font = "25px Lucida console";
		this.context.fillText(this.title + " (pep: " + index + " - energy: " + foodEnergy + " numFood: " + numFood + ")", 80, 80);

	},
	
	handleCanvasClick : function (x, y) {
		var i = 0,
			me = this;
		for (i = 0; i < this.fbar.length; i = i + 1) {
			var button = this.fbar[i];
			if (x >= (button.left) && x <= (button.left + button.width) && y >= button.top && y <= (button.top + button.height)) {
				if (button.handler) {
					button.handler.call(this, button);
				};
			}
		}
	}

});
